<!--
 * @Descripttion: 
 * @version: 
 * @Date: 2022-02-23 14:33:23
-->
<template>
  <div class="vm">
    <h2 class="h-title"></h2>
    <div id="map" class="map-x"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import XYZ from "ol/source/XYZ";
import { Logo, TileSuperMapRest } from "@supermap/iclient-ol";
import * as control from "ol/control";

import ImageLayer from 'ol/layer/Image';
import {Raster as RasterSource} from 'ol/source';
import dengZhiMianVue from '../dengzhimian/dengZhiMian.vue';


export default {
  name: "FirstMap",
  data() {
    return {
      // map: null,
    };
  },
  methods: {
    initMap() {
      this.map = new Map({
        controls: control.defaults({ zoom: false }),
        target: "map",
        view: new View({
          projection: "EPSG:4326",
          center: [120.609558,  29.321180],
          // minZoom:10,
          zoom: 8,
        }),
      });

      let tileLayer = new Tile({
        source: new XYZ({
          url: "http://t6.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd",
          projection: "EPSG:4326",
        //   crossOrigin: true
          crossOrigin: "anonymous"
        }),

        // source: new XYZ({
        //     url:
        //     'http://223.4.72.162:16080/arcgis/rest/services/basemap/ZLSLVectorMap/MapServer/tile/{z}/{y}/{x}',
        //     projection: 'EPSG:4326', //使用这个坐标系
        //     crossOrigin: 'anonymous'
        // }),
      });
      let tilezhujiLayer = new Tile({
        source: new XYZ({
          url: "http://t6.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd",
          projection: "EPSG:4326",
          crossOrigin: "anonymous"
        }),
      });

      //
      //定义颜色转换方法
      let reverseFunc = function (pixelsTemp) {
        //蓝色
        for (var i = 0; i < pixelsTemp.length; i += 4) {
          var r = pixelsTemp[i];
          var g = pixelsTemp[i + 1];
          var b = pixelsTemp[i + 2];

          pixelsTemp[i] = r + 10;
          pixelsTemp[i + 1] = g + 11;
          pixelsTemp[i + 2] = b + 17;

          //运用图像学公式，设置灰度值
          var grey = r * 0.3 + g * 0.59 + b * 0.11;
          //将rgb的值替换为灰度值
          pixelsTemp[i] = grey;
          pixelsTemp[i + 1] = grey;
          pixelsTemp[i + 2] = grey;

          //基于灰色，设置为蓝色，这几个数值是我自己试出来的，可以根据需求调整
          pixelsTemp[i] = 55 - pixelsTemp[i];
          pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1];
          pixelsTemp[i + 2] = 305 - pixelsTemp[i + 2];
          // 自己测试
          // pixelsTemp[i] = 100 - pixelsTemp[i];
          // pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1];
          // pixelsTemp[i + 2] = 300 - pixelsTemp[i + 2];
        }
      };
      //openlayer 像素转换类，可以直接当做source使用
      const raster = new RasterSource({
        sources: [
          //传入图层，这里是天地图矢量图或者天地图矢量注记
          tileLayer,
          // tilezhujiLayer,
        ],
        //这里设置为image类型，与官方示例不同，优化速度
        operationType: "image",
        operation: function (pixels, data) {
          //执行颜色转换方法，注意，这里的方法需要使用lib引入进来才可以使用
          reverseFunc(pixels[0].data);
          return pixels[0];
        },
        //线程数量
        threads: 10,
        //允许operation使用外部方法
        lib: {
          reverseFunc: reverseFunc,
        },
      });
      //创建新图层，注意，必须使用 ImageLayer
      let layer = new ImageLayer({
        name: "天地图矢量图层",
        source: raster,
      });
      //添加到地图  
      this.map.addLayer(layer);
      // this.map.addLayer(tileLayer);
      this.map.addLayer(tilezhujiLayer)
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style lang="scss" scoped>
</style>